<template>
  <div class="set_password_page">
    <CommonHeader title="设置密码" />
    <!-- 设置密码页主体 -->
    <div class="set_password_content page_no_tab_bar">
      <!-- 标题 -->
      <div class="set_password_title">请设置密码</div>
      <!-- 密码 -->
      <div class="input_box">
        <div class="input_label">设置密码</div>
        <div class="input input_psw">
          <input
            :type="isViewPsw1 ? 'text' : 'password'"
            placeholder="密码包含大小写"
            v-model="ruleForm.password"
          />
          <div class="is_open" @click="viewPsw1">
            <img
              v-if="!isViewPsw1"
              src="@/assets/login/close_icon.png"
              alt=""
            />
            <img v-else src="@/assets/login/open_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule">{{ rules.password.rule }}</div>
      </div>
      <!-- 密码 -->
      <div class="input_box">
        <div class="input_label">确认密码</div>
        <div class="input input_psw">
          <input
            :type="isViewPsw2 ? 'text' : 'password'"
            placeholder="确认密码"
            v-model="ruleForm.confirmPsw"
          />
          <div class="is_open" @click="viewPsw2">
            <img
              v-if="!isViewPsw2"
              src="@/assets/login/close_icon.png"
              alt=""
            />
            <img v-else src="@/assets/login/open_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule">{{ rules.confirmPsw.rule }}</div>
      </div>
      <!-- 验证提醒 -->
      <div class="add_text">密码至少8位字符，不能为纯数字</div>
      <!-- 注册按钮 -->
      <div class="operate_btn" @click="goPage">注册</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { useRouter } from "vue-router";
import { register } from "@/api/user";
import { ElMessage } from "element-plus";

// 获取路由对象
const router = useRouter();
// 密码是否可见
const isViewPsw1 = ref(false);
const isViewPsw2 = ref(false);
// 表单数据
const ruleForm: any = ref({
  password: "",
  confirmPsw: "",
});
const data = ref();
// 表单验证
const rules: any = reactive({
  password: {
    msg: "请输入密码",
    rule:""
  },
  confirmPsw: {
    msg: "请输入确认密码",
    rule:""
  },
});

// 查看密码
const viewPsw1 = () => {
  isViewPsw1.value = !isViewPsw1.value;
};
const viewPsw2 = () => {
  isViewPsw2.value = !isViewPsw2.value;
};

// 注册
const goPage = () => {
  if (validateForm()) {
    if(ruleForm.value.password != ruleForm.value.confirmPsw) return ElMessage.error("两次密码不一致！")
    let resData = {
      ...data.value,
      password: ruleForm.value.password,
    };
    register(resData).then((res: any) => {
      ElMessage.success("注册账号成功！")
      router.push("/regSuccess");
      sessionStorage.removeItem("data");
    });
  }
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 初始化数据
onMounted(() => {
  let sessionData = JSON.parse(sessionStorage.getItem("data") || "");
  data.value = sessionData;
});
</script>

<style lang="scss" scoped>
.set_password_page {
  .set_password_content {
    padding-top: 10px;
    .set_password_title {
      font-size: 22px;
      margin-bottom: 20px;
    }
    .input_box {
      // height: 108px;
      margin-bottom: 10px;
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        input {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #ffffff;
        }
      }
      .input_psw {
        display: flex;
        align-items: center;
        input {
          flex: 1;
        }
        .is_open {
          display: flex;
          align-items: center;
          padding: 0px 10px;
        }
      }
      .input_rule {
        color: #e63737;
        font-size: 14px;
      }
    }
    .operate_btn {
      margin-top: 20px;
      background: linear-gradient(to right, #14da62, #0d5eae);
      text-align: center;
      padding: 10px;
      border-radius: 10px;
    }
  }
}
</style>
